<template>
  <div ref="home" class="home">
    <!-- 品牌数据 -->
    <div v-for="(value, key, index) in BrandList" :key="index">
      <h4 :ref="'side' + key">
        {{ key }}
      </h4>
      <ul class="oul">
        <li
          v-for="item in value"
          @click="showMark(item.MasterID)"
          :key="item.MasterID"
        >
          <img :src="item.CoverPhoto" alt="" />
          <span>
            {{ item.Name }}
          </span>
        </li>
      </ul>
    </div>
    <!-- 侧边栏 -->
    <SideBar :letter="$refs"/>
    <!-- 弹框 -->
    <PopUp v-if="isShowMark" @close="(flag) => isShowMark = flag" :groupList="groupList">
     <div>
        <router-link to="/detail/123">
        1111111
      </router-link>
     </div>
    </PopUp>
  </div>
</template>

<script>
// 403 错误
// 1. 没有配置rem
// 2. 发起请求有很多重复代码(加载状态)

// 组件（两大类）
// 1. 标签的方式来使用
// 2. this.$toast()  自定义组件(this.)

import { mapActions, mapState } from "vuex";
import { getMasterBrandId } from "../api/brand";
import SideBar from "../components/SideBar.vue";
import PopUp from "../components/Popup.vue";
export default {
  name: "Home",
  data() {
    return {
      flag: false,
      text: "",
      // 控制弹框显示隐藏
      isShowMark: false,
      // 品牌下车系
      groupList: [],
    };
  },
  components: {
    SideBar,
    PopUp,
  },
  computed: {
    ...mapState(["BrandList", "initBrand"]),
  },
  created() {
    this.initBrandFn();
    // console.log(this);
  },
  methods: {
    ...mapActions(["initBrandFn"]),
    // 展示弹框
    showMark(MasterID) {
      this.isShowMark = true;
      getMasterBrandId({
        MasterID,
      }).then((res) => {
        this.groupList = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  overflow: scroll;
}
.home h4 {
  height: 34px;
  color: #666;
  font-size: 28px;
  background: #f4f4f4;
  padding-left: 30px;
  line-height: 34px;
}

.oul {
  margin: 30px;
}
.oul li {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}
.oul li img {
  height: 70px;
  width: 70px;
}
.oul li span {
  font-size: 24px;
  margin-left: 40px;
}
</style>
